<template>
	<view class="container" :style="{top:statusBarHeight+'px'}">
		<view class="header">
			<view class="header-title">控制</view>
			<view class="pa gotoIndex" @click="gotoUrl">设备列表</view>
		</view>
		<view class="page-wrap">
			<view class="ctrl-ul">
				<view class="ctrl-li">
					<view class="ctrl-title">长条LED灯</view>
					<view class="ctrl-wrap">
						<view class="ctrl-content flex-wrap-start">
							<view class="ctrl-tip">选择长条灯:</view>	
							<view class="led-ul flex-wrap-around">																			
								<view class="led-li" :class="(index+1)==ledIndex?'on':''" :data-index="index" @click="setLed" v-for="(item,index) in led" :key="index">{{item}}</view>
							</view>
						</view>
						<view class="ctrl-content ">
							<view class="ctrl-tip">跑马灯速度:</view>	
							<slider :value="speedVal" @change="ledSpeed" min="1" max="5" show-value />
						</view>
						<view class="ctrl-content flex-wrap-start">
							<view class="ctrl-tip">跑马灯个数:</view>
							<input type="number" @input="setInpuVal" data-type="ledNumer" placeholder="数字(1-255)" :value="ledNumer">
						</view>
						<view class="ctrl-content flex-wrap-around">
							<view class="color-li" :class="(index+1)==lenColor?'on':''" :data-index="index" :style="{background:item}" @click="setColor" data-type="1" v-for="(item,index) in colorLi" :key="index"></view>
						</view>
					</view>
					<view class="ctrl-send btn" @click="ctrlLed">发送指令</view>
				</view>
				<view class="ctrl-li">
					<view class="ctrl-title">监控状态</view>
					<view class="ctrl-wrap flex-wrap-around">
						
						<view class="jk-li" :class="(index+1)==jkIndex?'on':''" :data-index="index" v-for="(item,index) in jkStatus" :key="index">{{item}}</view>						
					</view>
				</view>
				
				<view class="ctrl-li">
					<view class="ctrl-title">环形LED灯</view>
					<view class="ctrl-wrap">
						<view class="ctrl-content">
							<input type="number"  @input="setInpuVal" data-type="ledTimes" placeholder="时间(1-255)" :value="ledTimes">
						</view>
						<view class="ctrl-content flex-wrap-around">							
							<view class="round-li" :class="(index+1)==roundIndex?'on':''" :data-index="index" @click="setRound" v-for="(item,index) in roundNum" :key="index">{{item}}</view>						
						</view>
						<view class="ctrl-content flex-wrap-around">
							<view class="color-li" :class="(index+1)==roundColor?'on':''" :data-index="index" :style="{background:item}" @click="setColor" data-type="2" v-for="(item,index) in colorLi" :key="index"></view>							
						</view>
					</view>
					<view class="ctrl-send btn" @click="ctrlLed2">发送指令</view>
				</view>
			</view>	
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				statusBarHeight:getApp().globalData.statusBarHeight,
				colorLi:['red','orange','yellow','green','cyan','blue','purple'],
				led:['a','b','c','d','e','f','g'],
				ledIndex:1,
				roundNum:[1,2,3,4,5,6],
				roundIndex:1,
				jkStatus:[1,2,3,4,5,6],
				jkIndex:0,
				lenColor:1,
				roundColor:1,
				speedVal:1,
				ledNumer:'',
				ledTimes:'',
				
			}
		},
		onLoad() {
			//初始化蓝牙
			this.$ble.init();
			//模拟数据
			// this.recvbleData({
			// 	data:'bb0301bb'
			// })
		},
		onHide(){
			//离开界面时断开设备
			var mac = getApp().globalData.mac[0].mac;
			mac&&this.$ble.disConnect(mac);
		},
		methods: {
			gotoUrl(){
				
				this.$maxhom.gotoPage('../index/index');
			},
			ctrlLed(){
				this.$cmd.ctrlLed({
					number:this.$maxhom.hex16(this.ledIndex),
					speed:this.$maxhom.hex16(this.speedVal),
					num:this.$maxhom.hex16(this.ledNumer),
					color:this.$maxhom.hex16(this.lenColor)
				});
				this.$maxhom.toast('发送指令');
			},
			ctrlLed2(){
				this.$cmd.ctrlled2({
					number:this.$maxhom.hex16(this.roundIndex),
					color:this.$maxhom.hex16(this.roundColor),
					time:this.$maxhom.hex16(this.ledTimes)
				});
				this.$maxhom.toast('发送指令');
			},
			setInpuVal(e){
				var type = e.currentTarget.dataset.type;
				var val = e.detail.value;
				this[type] = val;
			},
			setLed(e){
				var index = e.currentTarget.dataset.index;
				
				this.ledIndex = index+1;		
			},
			setRound(e){
				var index = e.currentTarget.dataset.index;
				
				this.roundIndex = index+1;		
			},
			setColor(e){	
				var type = e.currentTarget.dataset.type;
				var index = e.currentTarget.dataset.index;
						
				this[type == 1?'lenColor':'roundColor'] = index+1;		
			},
			ledSpeed(e){
				console.log('value 发生变化：' + e.detail.value)
				this.speedVal = e.detail.value;
			},
			recvbleData(res){
				//接收设备的数据
				var val = res.data;
				var head = val.substr(0,2);
				if(head == 'bb'){
					var num = parseInt(val.substr(2,2));
					var status = parseInt(val.substr(4,2));
					
					if(status == '01'){
						this.jkIndex = num;
					}
					
				}
			}
		}
	}
</script>

<style>
.header{
	height: 90rpx;
	line-height: 90rpx;
	text-align: center;
	border-bottom: 1px solid #ddd;
}
.header-title{
	font-weight: 800;
	font-size: 35rpx;
}
.gotoIndex{
	top: 0;
	right: 15rpx;
}
.ctrl-ul{
	padding: 15rpx;
}
.ctrl-li{
	border: 1px solid #eee;
	padding: 15rpx;
	border-radius: 15rpx;
	margin-bottom: 20rpx;
}
.ctrl-title{
	height: 75rpx;
	line-height: 75rpx;
	font-weight: bold;
	font-size: 35rpx;
}
.ctrl-tip{
	width: 26%;
	height: 60rpx;
	line-height: 60rpx;
}
.ctrl-tip+view,
.ctrl-tip+input{
	width: 74%;
}
.ctrl-content input{
	border-bottom: 1px solid #e1dfdf;
	text-indent:20rpx;
	height: 60rpx;
}
.led-li{
	background: green;
	color: #fff;
	height: 60rpx;
	line-height: 60rpx;
	width: 60rpx;
	border-radius: 100%;
	text-align: center;
	box-shadow: 0px 1px 3px #737673;
}
.led-li.on{
	background: red;
}
.ctrl-send,
.color-li{
	margin-top: 30rpx;
}
.color-li{
	height: 60rpx;
	width: 60rpx;
	border-radius: 100%;
	border: 1px solid #fff;
}
.color-li.on{
	border: 1px solid  #0c0a0a;
}
/* .color-li:nth-child(1){
	background: red;
}
.color-li:nth-child(2){
	background: orange;
}
.color-li:nth-child(3){
	background: yellow;
}
.color-li:nth-child(4){
	background: green;
}
.color-li:nth-child(5){
	background: cyan;
}
.color-li:nth-child(6){
	background: blue;
}
.color-li:nth-child(7){
	background: purple;
} */
.jk-li,.round-li{
	height: 75rpx;
	line-height: 75rpx;
	background: green;
	width: 75rpx;
	color: #fff;
	text-align: center;
	border-radius: 100%;
	margin-bottom: 15rpx;
}
.round-li{
	margin-top: 15rpx;
	background: #cacac5;
}
.jk-li.on,
.round-li.on{
	background: red;
}


</style>
